// Created by lifei on 2020/7/21--9:19.
<template>
    <div class="card-box">
        <div class="card-title">
            <span>配套信息</span>
            <el-button-group>
                <el-button size="small" type="primary" @click="$refs.editMatchInfo.show()">添加</el-button>
            </el-button-group>
        </div>
        <div class="margin-box">
            <el-table
                :data="tableData"
                align="center">
                <el-table-column
                    label="物业名称"
                    prop="name">
                </el-table-column>
                <el-table-column
                    label="项目类型"
                    prop="type">
                </el-table-column>
                <el-table-column
                    label="项目小类"
                    prop="type2">
                </el-table-column>
                <el-table-column
                    label="占地面积(m²)"
                    prop="area">
                </el-table-column>
                <el-table-column
                    label="建筑面积(m²)"
                    prop="area2">
                </el-table-column>
                <el-table-column
                    label="移交方式"
                    prop="methods">
                </el-table-column>
                <el-table-column
                    label="备注"
                    prop="remark">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <div class="flex-c">
                            <el-button type="text" @click="$refs.editMatchInfo.show(scope.row)">编辑</el-button>
                            <span class="btn-line"></span>
                            <el-button type="text" @click="del(scope.row, scope.$index)">
                                <span class="text-danger">删除</span>
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <editMatchInfo ref="editMatchInfo" @addData="addData" @updateData="updateData"></editMatchInfo>
    </div>
</template>

<script>
    import editMatchInfo from './edit-match-info'

    export default {
        name: "edit-match-info",
        components: {editMatchInfo},
        data() {
            return {
                dialogVisible: false,
                input: '',
                value: '',
                tableData: [
                    {
                        id: 123,
                        name: '深业上城改造',
                        type: '2',
                        type2: '3',
                        area: '123',
                        area2: '456',
                        methods: '4',
                        remark: '备注信息',
                    }
                ],
                area: [],
                form: {},
                lists: [
                    {
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }
                ],
            }
        },
        mounted() {
        },
        methods: {
            addData(data) {
                this.tableData.push(data)
            },
            updateData(data) {
                let index = this.tableData.findIndex(i => i.id === data.id)
                this.tableData.splice(index, 1, data)
            },
            del(item, index) {
                this.$confirm(`您确定要删除 ${item.name} 吗？`, '删除确认', {
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index, 1)
                }).catch(() => {

                })
            }
        }
    }
</script>

<style scoped lang='scss'>
    

    @include formWrap();

</style>
